<template>
  <div class="home_container">

    <!--左侧菜单-->
    <div class="menu_slider">
      <logo-component></logo-component>
      <!-- 滚动条 展示菜单-->
      <el-scrollbar class="menu_scrollbar">
        <!--菜单组件-->
        <el-menu background-color="$base-menu-bgColor" text-color="white" active-text-color="yellowgreen"
                 :default-active="$route.path">
          <!--把小仓库中的list传给MenuComponent组件-->
          <Menu-component :menuList="useUserStore.menuRoutes"></Menu-component>
        </el-menu>
      </el-scrollbar>
    </div>

    <!--顶部导航-->
    <div class="top_bar">
      <TabBar></TabBar>
    </div>

    <!--内容展示区-->
    <div class="main_show">
      <Main></Main>
    </div>
  </div>
</template>

<script setup lang="ts">
import logoComponent from './components/logoComponent.vue';//引入logo组件
import MenuComponent from './menu/menuComponent.vue';//引入菜单组件
import TabBar from "./tablebar/index.vue"//引入tabBar组件
import Main from "../main/mainComponent.vue"//数据展示组件
//获取路由对象  用于获取当前路由地址，好进行展开
import {useRoute} from "vue-router";
//获取小仓库的的路由数组，用于动态生成菜单
import userStore from "../../piniaStore/moudules/userStore.ts";

//获取路由对象
let $route = useRoute();
let useUserStore = userStore();//拿到小仓库
</script>

<style scoped lang="scss">
.home_container {
  width: 100%;
  height: 100vh;

  .menu_slider {
    width: $base-menu-width;
    height: 100vh;
    background: $base-menu-bgColor;
    color: white;

    .menu_scrollbar {
      top: 50px;
      bottom: 50px;
      width: 100%;
      height: calc(100vh - $base-menu-logo-height - 100px);

      .el-menu {
        border-right: none; //右侧边框
      }
    }


  }

  .top_bar {
    position: absolute;
    top: 0;
    left: $base-menu-width;
    width: calc(100% - $base-menu-width);
    height: $base-top-bar-height;
  }

  .main_show {
    position: absolute;
    width: calc(100% - $base-menu-width);
    left: $base-menu-width;
    top: $base-top-bar-height;
    height: calc(100vh - $base-top-bar-height);
    padding: 20px;
    overflow: auto;
  }
}
</style>